<script type="text/javascript">
	$(document).ready(function () {
		var tkel_task = "CREATE";
		var btn_tkel_task = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
		var editrow = -1;
		
		var navbar = $("#jqxNavigationBar");
		navbar.jqxNavigationBar({ width: '100%', height: 420, sizeMode: 'auto', theme: theme });
		
		/* START DATA */
		// prepare the data
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'VALIDTO' },
				{ name: 'NOURUT' },
				{ name: 'GRADE'},
				{ name: 'KODEJAB'},
				{ name: 'NIK' },
				{ name: 'RPTISTRI' },
				{ name: 'RPTANAK' },
				{ name: 'USERNAME' }
			],
			id: 'GRADE',
			url: 'index.php?c=c_tkel&m=get_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		
		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
			filterable: true,
			pageable: true,
			autoheight: true,
			columns: [
				{ text: 'VALIDTO', dataField: 'VALIDTO', width: 280 },
				{ text: 'NOURUT', dataField: 'NOURUT', width: 280 },
				{ text: 'GRADE', dataField: 'GRADE', width: 280 },
				{ text: 'KODEJAB', dataField: 'KODEJAB', width: 280 },
				{ text: 'NIK', dataField: 'NIK', width: 280 },
				{ text: 'RPTISTRI', dataField: 'RPTISTRI', width: 280 },
				{ text: 'RPTANAK', dataField: 'RPTANAK', width: 280 },
				{ text: 'USERNAME', dataField: 'USERNAME', width: 280 },
				{ text: '', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				},
				{ text: '', datafield: 'Hapus', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Hapus";
				}, buttonclick: function (row) {
					if(confirm("Yakin data akan dihapus?")){
						// open form Create/Update.
						editrow = row;
						
						// get the clicked row's data and initialize the input fields.
						var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
						cu_formDel(dataRecord);
					}
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
		$('.text-input').addClass('jqx-input');
		$('.text-input').addClass('jqx-rc-all');
		$('.text-input').width(200);
		$('.text-input').height(23);
		if (theme.length > 0) {
			$('.text-input').addClass('jqx-input-' + theme);
			$('.text-input').addClass('jqx-widget-content-' + theme);
			$('.text-input').addClass('jqx-rc-all-' + theme);
		}
		
		var txt_validto = $("#tkel_validto");		
		var txt_nourut = $("#tkel_nourut");
		var txt_kodejab = $("#tkel_kodejab");
		var txt_nik = $("#tkel_nik");
		var txt_rptistri = $("#tkel_rptistri");
		var txt_rptanak = $("#tkel_rptanak");
		var txt_username = $("#tkel_username");
		txt_rptanak.bind('keypress', function(e) {
      		if ((e.keyCode || e.which) == 13) {
        	    return false;
       		}
		});
		var txt_grade = $("#tkel_grade");		
		txt_grade.width(60);
		
		var create_btn = $("#createBtn");
		var save_btn = $("#Save");
		var cancel_btn = $("#Cancel");
		var export_excel_btn = $("#exportExcelBtn");
		var export_pdf_btn = $("#exportPdfBtn");
		var export_print_btn = $("#exportPrintBtn");
		
		// initialize the popup window and buttons.
		create_btn.jqxButton({ theme: theme });
		save_btn.jqxButton({ theme: theme });
		cancel_btn.jqxButton({ theme: theme });
		export_excel_btn.jqxButton({ theme: theme });
		export_pdf_btn.jqxButton({ theme: theme });
		export_print_btn.jqxButton({ theme: theme });
		
		var tkelForm = $('#tkelForm');
		tkelForm.jqxValidator({
			rules: [
				{ input: txt_validto, message: 'Valid to harus diisi!', action: 'valuechanged, blur', rule: 'required' },
				{ input: txt_nourut, message: 'No urut harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_kodejab, message: 'Kode Jab harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_nik, message: 'NIK harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_rptistri, message: 'RPT Istri harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_rptanak, message: 'RPT Anak harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_grade, message: 'Grade harus diisi!', action: 'keyup', rule: 'required' },
				{ input: txt_grade, message: 'Grade panjang 1-2 karakter!', action: 'keyup', rule: 'length=1,2' },
				{ input: txt_grade, message: "Grade harus karakter numerik '0'-'9'!", action: 'keyup', rule: function(input)
					{
						//if (/^\d+$/.test(input.value)) return true;
						var value=txt_grade.val();
						if (value.match(/^[0-9]+$/)!=null) return true;
						else return false;
					}
				}
				],
			theme: theme
		});
		
		var saving_notice = $("#saveGradeNotice");
		var ok = $("#ok");
		var message_notice = $('#eventLog');
		saving_notice.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: $("#ok"), modalOpacity: 0.05, position: { x: 400, y: 100 } });
		ok.jqxButton({ theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the user clicks the 'Save' button.
        save_btn.click(function () {
			var form_validate = tkelForm.jqxValidator('validate');
			if(form_validate){
				var tkel_validto_f = "";
				var tkel_nourut_f = "";
				var tkel_grade_f = "";
				var tkel_kodejab_f = "";
				var tkel_nik_f = "";
				var tkel_rptistri_f = "";
				var tkel_rptanak_f = "";
				var tkel_username_f = "";
				
				if(txt_validto.val() !== null){
					//tkel_validto_f = txt_validto.jqxMaskedInput('val');
					tkel_validto_f = txt_validto.val();
				}
				if(txt_nourut.val() !== null){
					tkel_nourut_f = txt_nourut.val();
				}
				if(txt_kodejab.val() !== null){
					tkel_kodejab_f = txt_kodejab.val();
				}
				if(txt_nik.val() !== null){
					tkel_nik_f = txt_nik.val();
				}
				if(txt_rptistri.val() !== null){
					tkel_rptistri_f = txt_rptistri.val();
				}
				if(txt_rptanak.val() !== null){
					tkel_rptanak_f = txt_rptanak.val();
				}
				if(txt_username.val() !== null){
					tkel_username_f = txt_username.val();
				}				
				if(txt_grade.val() !== null){
					tkel_grade_f = txt_grade.val();
				}
				
				var row = {
						task: tkel_task,
						validto: tkel_validto_f,
						nourut: tkel_nourut_f,
						kodejab: tkel_kodejab_f,
						nik: tkel_nik_f,
						rptistri: tkel_rptistri_f,
						rptanak: tkel_rptanak_f,
						username: tkel_username_f,
						grade: tkel_grade_f
				};
				
				if (editrow >= 0) {
					//edit row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_tkel&m=get_action',
						data: row,
						success: function(response){
							//if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							//}
						}
					});
				}else{
					//add row
					$.ajax({
						type: 'POST',
						url: 'index.php?c=c_tkel&m=get_action',
						data: row,
						success: function(response){
							if(response==1){
								$('#jqxgrid').jqxGrid('updatebounddata');
								gridExpand();
							}
						}
					});
					
				}
			}else{
				createNotice("Isian data belum lengkap!");
			}
        });

        cancel_btn.click(function () {
        	cu_formReset();
        	$("#popupWindow").jqxWindow('hide');
        	gridExpand();
        });
		
		create_btn.click(function () {
        	btn_tkel_task = "CREATE";			
        	cu_formReset();			
        	formExpand();
        	txt_username.prop('disabled', false);
		txt_validto.focus();
        });
		
		ok.click(function(){
        	message_notice.empty();
        	saving_notice.jqxWindow('hide');
        });
		
		export_excel_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_tkel&m=export_excel',
				data: {rows: rowsdata},
				success: function(response){
					if(response==1){
						win = window.location=('./documents/tkel.xlsx');
					}
				}
			});
		}
	});
	
	export_pdf_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_tkel&m=export_pdf',
				data: {rows: rowsdata}
			});
		}
	});
	
	export_print_btn.click(function () {
		var rowscount = $('#jqxgrid').jqxGrid('getdatainformation').rowscount;
		if(rowscount>0){
			var rowsdata = $('#jqxgrid').jqxGrid('getrows');
			$.ajax({
				type: 'POST',
				url: 'index.php?c=c_tkel&m=cetak',
				data: {rows: rowsdata},
				success: function(response){
					win = window.open('./documents/tkellist.html','tkel_list','height=400,width=900,resizable=1,scrollbars=1, menubar=1');
				}
			});
		}
	});
        
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
			//txt_validto..jqxMaskedInput('val','');
			txt_validto.val("");
			txt_nourut.val("");
			txt_kodejab.val("");
			txt_nik.val("");
			txt_rptistri.val("");
			txt_rptanak.val("");
			txt_username.val("");
			
			txt_grade.val("");		
			txt_grade.prop('disabled', false);
			txt_username.prop('disabled', false);
			tkelForm.jqxValidator('hide');
        }

        function cu_formSet(dataRecord){
            btn_tkel_task = "UPDATE";
		txt_validto.val(dataRecord.VALIDTO);
		txt_nourut.val(dataRecord.NOURUT);
		txt_kodejab.val(dataRecord.KODEJAB);
		txt_nik.val(dataRecord.NIK);
		txt_rptistri.val(dataRecord.RPTISTRI);
		txt_rptanak.val(dataRecord.RPTANAK);
		txt_username.val(dataRecord.USERNAME);	
		txt_grade.val(dataRecord.GRADE);
		
		txt_grade.prop('disabled', true);
		txt_username.prop('disabled', true);  		
            
            formExpand();		
		txt_validto.focus();
        }
	
	function cu_formDel(dataRecord){
		var row = {
				task: 'DELETE',
				grade: dataRecord.GRADE
		};
		
		$.ajax({
			type: 'POST',
			url: 'index.php?c=c_tkel&m=get_action',
			data: row,
			success: function(response){
				if(response==1){
					$('#jqxgrid').jqxGrid('updatebounddata');
					gridExpand();
				}
				else{
					createNotice(response);
				}
			}
		});
		
	}
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	navbar.jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	navbar.jqxNavigationBar('expandAt', 1);
        }
	function createNotice(msg){
			message_notice.html(msg);
			saving_notice.jqxWindow('show');
		saving_notice.jqxWindow('bringToFront');
        }
        /* END FUNCTION */
		
	navbar.bind('expandedItem', function (event) {
		if((event.item == 1) && (formExpandVar == 1) && (btn_tkel_task == "UPDATE")){
			tkel_task = "UPDATE";
		}else{
			tkel_task = "CREATE";
		}
	});
	
	navbar.jqxNavigationBar('expandAt', 0);
	navbar.jqxNavigationBar('collapseAt', 1);
		
	});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 350;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="tkelForm" action="#">
		<table class="register-table">
			<tr>
				<td align="right" valign="top" width="120px">VALID TO:</td>
				<td align="left"><input id="tkel_validto" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">NO URUT:</td>
				<td align="left"><input id="tkel_nourut" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">GRADE:</td>
				<td align="left"><input id="tkel_grade" class="text-input" maxlength="2" />(maks 2 karakter: '0'-'9')</td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KODE JAB:</td>
				<td align="left"><input id="tkel_kodejab" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">NIK:</td>
				<td align="left"><input id="tkel_nik" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">RPT ISTRI:</td>
				<td align="left"><input id="tkel_rptistri" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">RPT ANAK:</td>
				<td align="left"><input id="tkel_rptanak" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">USERNAME:</td>
				<td align="left"><input id="tkel_username" class="text-input" maxlength="50" /></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
	<input id="exportExcelBtn" type="button" value="Export Excel" />
	<input id="exportPdfBtn" type="button" value="Export PDF" />
	<input id="exportPrintBtn" type="button" value="Print" />
</div>

<div id="saveGradeNotice">
    <div>Info</div>
    <div>
        <div id="eventLog"></div>
        <div style="float: right; margin-top: 15px;">
            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
        </div>
    </div>
</div>